fix(define-custom-element): ensure async wrapper passes custom element callback to inner component This ensures event emits work for async coponent in custom elements. (fix #5599) #5601
Conversation
|
✔️ Deploy Preview for vuejs-coverage ready! 🔨 Explore the source changes: f4f8dba 🔍 Inspect the deploy log: https://app.netlify.com/sites/vuejs-coverage/deploys/6233adb26a7c180008e399eb 😎 Browse the preview: https://deploy-preview-5601--vuejs-coverage.netlify.app |
|
✔️ Deploy Preview for vue-sfc-playground ready! 🔨 Explore the source changes: f4f8dba 🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-sfc-playground/deploys/6233adb2afaf540008b4ed4d 😎 Browse the preview: https://deploy-preview-5601--vue-sfc-playground.netlify.app/ |
|
✔️ Deploy Preview for vue-next-template-explorer ready! 🔨 Explore the source changes: f4f8dba 🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-next-template-explorer/deploys/6233adb268e1fd0008b65186 😎 Browse the preview: https://deploy-preview-5601--vue-next-template-explorer.netlify.app |
LinusBorg
added
need guidance
| // this feels brittle but seems necessary to reach the node in the DOM. | ||
| await nextTick() | ||
| await nextTick() | ||
| await nextTick() |
There was a problem hiding this comment.
You can replace these await nextTick() calls with customElements.whenDefined(), which is a Promise that resolves when the element is defined, where the element is connected and the shadow root is available.
I locally verified this with your changeset.
| // this feels brittle but seems necessary to reach the node in the DOM. | |
| await nextTick() | |
| await nextTick() | |
| await nextTick() | |
| await customElements.whenDefined('my-async-el-emits') |
There was a problem hiding this comment.
TIL, thanks!
I will play with this. Think it still needs one nextTick to wait for Vue's update cycle to finish after the custom element has connected, but that would be normal.
yyx990803
force-pushed
the
linusborg/fix-cereload-5599
branch
from
f4f8dba
to
7961526
Compare
This PR includes a different approach to trigger
ceReloadwhendefineCustomElementis used withdefineAsyncComponent.We now pass the callback to the inner component's vnode, and remove it from the async wrapper.
that way, the injections
Open Questions
I figured that this would also make a part of HMR code unecessary, but am not 100% sure this covers all bases.
Would need some guidance on this.
close #5599